<template>
  <div class="app-Container">
    <div class="top">
      <div class="title">数据概览</div>
      <div class="lines"></div>
    </div>
    <div class="nums">
      <div v-for="(item, index) in lists" :key="item.id" class="item">
        <div class="item_img">
          <img v-if="index == 0" src="../assets/images/appointment.png" alt="">
          <img v-if="index == 1" src="../assets/images/service.png" alt="">
          <img v-if="index == 2" src="../assets/images/unfinished.png" alt="">
          <img v-if="index == 3" src="../assets/images/general.png" alt="">
          <img v-if="index == 4" src="../assets/images/todays.png" alt="">
        </div>
        <div class="item_content">
          <div>{{ item.num }}</div>
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="contents">
      <div class="top_content">
        <div class="content_left">
          <div class="content_title">
            <div><img src="../assets/images/circle_1.png" alt=""></div>
            <div><span>近七日预约情况</span></div>
          </div>
          <div ref="chart" class="chart-container"></div>
        </div>
        <div class="content_right">
          <div class="content_title">
            <div><img src="../assets/images/circle_2.png" alt=""></div>
            <div><span>近七日测评情况</span></div>
          </div>
          <div ref="chart1" class="chart-container"></div>
        </div>
      </div>
      <div class="top_content bottom_content">
        <div class="content_left">
          <div class="content_title">
            <div><img src="../assets/images/circle_3.png" alt=""></div>
            <div><span>测评排行</span></div>
          </div>
          <div ref="chart2" class="chart-container"></div>
        </div>
        <div class="content_right">
          <div class="content_title">
            <div><img src="../assets/images/circle_4.png" alt=""></div>
            <div><span>热门心理咨询师排名</span></div>
          </div>

          <div class="table_content">
            <div class="table_content_div">
              <div class="content_flex flex_header">
                <div >排名</div>
                <div style="width: 60px;">医生姓名</div>
                <div style="width: 40px;">排号量</div>
              </div>
              <div v-for="(item, index) in tableData1.slice(0, 5)" :key="index" class="content_flex flex_bottom">
                <div class="sort" >{{ index + 1 }}</div>
                <div  style="width: 60px;">{{ item.expert_name }}</div>
                <div style="width: 40px;">{{ item.appointment_count }}</div>
              </div>
            </div>
            <div class="table_content_div">
              <div class="content_flex flex_header">
                <div>排名</div>
                <div style="width: 60px;">医生姓名</div>
                <div style="width: 40px;">排号量</div>
              </div>
              <div v-for="(item, index) in tableData1.slice(5, 10)" :key="index" class="content_flex flex_bottom ">
                <div class="sort">{{ index + 6 }}</div>
                <div style="width: 60px;">{{ item.expert_name }}</div>
                <div style="width: 40px;">{{ item.appointment_count }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { appointmentNumber, todayServiceOrderCount, unfinishedAppointmentCount, totalRevenue, todayRevenue, selectLast7DaysAppointmentCount, selectLast7DaysAppraisalCount, selectAllAppraisalCount, selectTop10ExpertsWithName } from '@/api/home.js'
export default {
  data() {
    return {
      tableData1: [
        // {
        //   index1: 1,
        //   expert_name: '王黎',
        //   appointment_count: 1234
        // },
        // {
        //   index1: 2,
        //   expert_name: '李四',
        //   appointment_count: 1100
        // },
        // {
        //   index1: 3,
        //   expert_name: '王五',
        //   appointment_count: 1000
        // },
        // {
        //   index1: 4,
        //   expert_name: '李建国',
        //   appointment_count: 900
        // },
        // {
        //   index1: 5,
        //   expert_name: '王建国',
        //   appointment_count: 800
        // },
        // {
        //   index1: 6,
        //   expert_name: '李黎',
        //   appointment_count: 700
        // },
        // {
        //   index1: 7,
        //   expert_name: '王四',
        //   appointment_count: 600
        // },
        // {
        //   index1: 8,
        //   expert_name: '赵五',
        //   appointment_count: 500
        // },
        // {
        //   index1: 9,
        //   expert_name: '周建国',
        //   appointment_count: 400
        // },
        // {
        //   index1: 10,
        //   expert_name: '吴建君',
        //   appointment_count: 300
        // }
      ],
      lists: [
        {
          imgs: '../assets/images/appointment.png',
          num: 0,
          id: 1,
          name: '今日预约单数'
        },
        {
          imgs: '../assets/images/service.png',
          num: 0,
          id: 2,
          name: '今日服务订单数'
        },
        {
          imgs: '../assets/images/unfinished.png',
          num: 0,
          id: 3,
          name: '未完成预约订单'
        },
        {
          imgs: '../assets/images/general.png',
          num: 0,
          id: 4,
          name: '总营业收入'
        },
        {
          imgs: '../assets/images/todays.png',
          num: 0,
          id: 5,
          name: '今日收入'
        }
      ],
      chartHeight: 0
    }
  },
  created() {
    appointmentNumber().then(res => {
      this.lists[0].num = res.msg
    })
    todayServiceOrderCount().then(res => {
      this.lists[1].num = res.msg
    })
    unfinishedAppointmentCount().then(res => {
      this.lists[2].num = res.msg
    })
    totalRevenue().then(res => {
      this.lists[3].num = res.msg
    })
    todayRevenue().then(res => {
      this.lists[4].num = res.msg
    })

    selectTop10ExpertsWithName().then(res => {
      this.tableData1 = res.data
    })
  },
  mounted() {
    this.calculateLayout();
    this.initCharts();

    // 初始化行高计算
    this.calculateRowHeight();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return {
        'color': '#999',
        'fontSize': '10px', // 减小表头字体大小
        'background': '#fff',
        'border-top': '1px solid #dfe6ec',
        'height': '40px !important' // 表头高度
      };
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return {
        'color': '#333',
        'height': '10px !important', // 表格内容高度
        'fontSize': '10px' // 减小单元格内容字体大小
      };
    },
    handleResize() {
      this.calculateLayout();
      this.initCharts();
      // 重新计算行高
      this.calculateRowHeight();
    },
    calculateRowHeight() {
      const tableContent = document.querySelector('.table_content');
      if (!tableContent) return;
      const table1 = tableContent.querySelector('el-table:first-child');
      const table2 = tableContent.querySelector('el-table:last-child');
      if (!table1 || !table2) return;

      const headerHeight = 30; // 调整表头高度
      const rowCount = table1.rows.length; // 获取表格行数
      const availableHeightForRows = tableContent.offsetHeight - headerHeight;
      this.rowHeight = Math.max(Math.floor(availableHeightForRows / rowCount), 30);
    },
    calculateLayout() {
      // 计算可用高度
      const containerHeight = window.innerHeight;
      const topHeight = document.querySelector('.top').offsetHeight;
      const numsHeight = document.querySelector('.nums').offsetHeight;
      const margins = 20 * 3; // 上下边距和内容间距

      // 计算图表容器高度
      const remainingHeight = containerHeight - topHeight - numsHeight - margins;
      this.chartHeight = Math.floor(remainingHeight / 2); // 两行图表平分剩余高度
      console.log(this.chartHeight)
    },
    initCharts() {
      const chartOptions = {
        animationDuration: 1000,
        grid: {
          top: 40,
          right: 20,
          bottom: 30,
          left: 50
        }
      };

      selectLast7DaysAppointmentCount().then(res => {
        let xData = res.data.map(item => item.date)
        let yData = res.data.map(item => item.count)
         this.initChart('chart', '#2878FF',xData,yData);
      })
      selectLast7DaysAppraisalCount().then(res => {
        let xData = res.data.map(item => item.date)
        let yData = res.data.map(item => item.count)
        this.initChart('chart1', '#ff9933',xData,yData);
      })
      selectAllAppraisalCount().then(res => {
        let xData = res.data.map(item => item.appraisal_name)
        let yData = res.data.map(item => item.count)
          this.initChart('chart2', '#6666ff',xData,yData);
      })
    },
    initChart(refName, color,xDatas,yDatas) {
      const chartDom = this.$refs[refName];
      if (!chartDom) return;

      // 设置图表容器高度
      chartDom.style.height = `${this.chartHeight - 60}px`; // 减去标题和边距高度

      const chart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom);

      const xData = xDatas;
      const yData = yDatas;

      const option = {
        ...this.chartOption(xData, yData, color),
        grid: {
          top: 40,
          right: 20,
          bottom: 30,
          left: 50
        }
      };

      chart.setOption(option);
      chart.resize();
    },
    chartOption(xData, yData, color) {
      return {
        xAxis: {
          type: 'category',
          data: xData,
          axisLine: {
            show: true,
            lineStyle: { color: '#ccc' }
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            // rotate:45
          },
          boundaryGap: true
        },
        yAxis: {
          type: 'value',
          name: '人数',
          nameTextStyle: {
            color: '#666',
            fontSize: 12
          },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: '#666',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#eee'],
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            data: yData,
            label: {
              show: true,
              position: 'top',
              color: '#333',
              fontSize: 12
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color },
                  { offset: 1, color: 'rgba(255,255,255,0)' }
                ]
              ),
              borderRadius: [80, 80, 0, 0],
              borderColor: 'transparent'
            },
            barWidth: '20px',
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: this.lightenColor(color, 20) },
                    { offset: 1, color: 'rgba(255,255,255,0)' }
                  ]
                )
              }
            }
          }
        ]
      };
    },
    lightenColor(color, percent) {
      // 简单的颜色变亮函数
      const num = parseInt(color.replace('#', ''), 16);
      const amt = Math.round(2.55 * percent);
      const R = (num >> 16) + amt;
      const G = (num >> 8 & 0x00FF) + amt;
      const B = (num & 0x0000FF) + amt;

      return '#' + (
        0x1000000 +
        (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
        (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
        (B < 255 ? B < 1 ? 0 : B : 255)
      ).toString(16).slice(1);
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

.app-Container {
  width: 100%;
  height: calc(100vh - 84px);
  background: #F5F4F8;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0;
  overflow: hidden;

  .table_content {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    height: 100%;

    .table_content_div {
      width: 45%;

      .flex_bottom {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;

      }

      .flex_header {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
      }

      .content_flex:last-child {
        border-bottom: 1px solid #E0E0E0;
      }

      .content_flex {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        border-top: 1px solid #E0E0E0;
        padding: 0 30px;
        height: calc((100%) / 6);
        >div{
          margin: auto;
          text-align: center;
        }

        .sort {
          background: linear-gradient(309deg, #FE5F73 0%, #FFCED4 100%);
          box-shadow: 0px 0px 3px rgba(254, 95, 115, 0.2);
          border-radius: 50%;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #FFFFFF;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
        }
      }
    }
  }

  .top {
    height: auto;
    flex-shrink: 0;

    .lines {
      width: 80px;
      height: 4px;
      background: linear-gradient(90deg, #0076FF 0%, #F5F4F8 100%);
      margin-top: 5px;
    }

    .title {
      width: 75px;
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: #0C2F48;
    }
  }

  .nums {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    flex-shrink: 0;
    gap: 10px;

    .item {
      flex: 1;
      min-width: 0;
      height: 100px;
      width: 344px;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
      border-radius: 10px;
      display: flex;
      align-items: center;
      padding: 0 10px;

      .item_content {
        margin-left: 15%;
        display: flex;
        flex-direction: column;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        >div:nth-child(1) {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 20px;
          color: #333333;
        }

        >div:nth-child(2) {
          font-family: PingFang SC;
          font-size: 14px;
          color: #999999;
          margin-top: 5px;
        }
      }

      .item_img {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
        margin-left: 1%;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }

    .item:nth-child(1) {
      background: linear-gradient(to top left, #FFFFFF 75%, #D9ECFF 100%);
    }

    .item:nth-child(2) {
      background: linear-gradient(to top left, #FFFFFF 75%, #FBE9FF 100%);
    }

    .item:nth-child(3) {
      background: linear-gradient(to top left, #FFFFFF 75%, #E4E3FF 100%);
    }

    .item:nth-child(4) {
      background: linear-gradient(to top left, #FFFFFF 75%, #D9ECFF 100%);
    }

    .item:nth-child(5) {
      background: linear-gradient(to top left, #FFFFFF 75%, #FFF1DE 100%);
    }
  }

  .contents {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 10px;

    .top_content {
      flex: 1;
      display: flex;
      gap: 10px;
      min-height: 0;

      &.bottom_content {
        margin-bottom: 0;
      }

      .content_left,
      .content_right {
        flex: 1;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .content_title {
        padding: 10px;
        display: flex;
        align-items: center;

        >div:first-child {
          width: 20px;
          height: 20px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        >div:last-child {
          margin-left: 10px;

          span {
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #303030;
          }
        }
      }

      .chart-container {
        flex: 1;
        min-height: 0;
        width: 100%;
      }
    }
  }
}
</style>